/* eslint-disable no-unused-vars */
import React from "react";
import { Modal, Toast } from "antd-mobile";
import { lock, unlock } from "tua-body-scroll-lock";
// import api from "@/api";
import { OBS_URL, IS_PROD, ADD_ADDRESS_URL, ACTIVITY_ID } from "@/config";
import "./index.less";

export default class ModalCheck extends React.Component {
  state = {
    isLotteryModaShow: false,
    isResultModalShow: false,
    // 九宫格数据
    imgList: [
      {
        status: 0,
        name: "花生宝宝",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall1.png`,
      },
      {
        status: 0,
        name: "长虹智能养生壶",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall2.png`,
      },
      {
        status: 0,
        name: "6.6元",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall3.png`,
      },
      {
        status: 0,
        name: "漫花抽纸3包",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall4.png`,
      },
      {
        status: 0,
        name: "88元",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall5.png`,
      },
      {
        status: 0,
        name: "虾选擦手巾",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall6.png`,
      },
      {
        status: 0,
        name: "0.68元",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall7.png`,
      },
      {
        status: 0,
        name: "花生手机支架",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall8.png`,
      },
      {
        status: 0,
        name: "花币1000",
        value: `https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicSmall9.png`,
      },
    ],
    // 循环顺序
    cycleIndexList: [0, 1, 2, 5, 8, 7, 6, 3, 4],
    // 当前索引
    currentIndex: 0,
    // 移动的次数--动态计算由循环圈数和幸运数字决定
    moveCount: 0,
    // 循环圈数
    cycleNum: 3,
    // 幸运数字
    luckIndex: 8,
    // 移动速度
    speedNum: 50,
    // 已经抽奖？
    isStart: false,
  };

  handleShow = () => {
    this.setState({
      isLotteryModaShow: true,
    });
    lock();
  };

  handleClose = () => {
    this.setState({
      isLotteryModaShow: false,
      isResultModalShow: false,
    });
    unlock();
  };

  actionMove = () => {
    let { imgList, cycleIndexList, currentIndex, moveCount, speedNum } = this.state;

    // 运行结束，则唤起中奖结果框，并返回
    if (moveCount === 0) {
      setTimeout(() => {
        this.setState({
          isLotteryModaShow: false,
          isResultModalShow: true,
        });
      }, 500);
      return false;
    }

    // 选中当前
    imgList[currentIndex].status = 1;
    // 当前索引在索引循环列表的第一个时
    if (currentIndex === 0) {
      // 取消前一个选中
      imgList[4].status = 0;
      // 更新当前索引
      currentIndex = 1;
    } else {
      // 获取当前索引，所在的索引顺序列表中的位置
      const tempIndex = cycleIndexList.indexOf(currentIndex);
      imgList[cycleIndexList[tempIndex - 1]].status = 0;
      // 更新当前索引
      if (tempIndex === cycleIndexList.length - 1) {
        currentIndex = 0;
      } else {
        currentIndex = cycleIndexList[tempIndex + 1];
      }
    }

    this.setState(
      {
        imgList,
        moveCount: moveCount - 1,
        currentIndex,
      },
      () => {
        setTimeout(() => {
          window.requestAnimationFrame(() => {
            this.actionMove();
          });
        }, speedNum);
      }
    );
  };

  startRun = async () => {
    let luckIndex = 2;
    const { cycleIndexList, cycleNum, isStart } = this.state;
    // 已经运行过一次，则返回
    if (isStart) return false;

    // 通过接口判断新用户的中奖商品
    try {
      // const { data } = await api.openAward({ dataType: 2 });
      const data = {
        awardType: "1",
        awardValue: "0.68",
      };
      console.log("新用户开奖--", data);
      if (data) {
        // 根据新人中奖的结果，得到对应的luckIndex
        // 现金红包
        if (data.awardType == "1") {
          if (data.awardValue == "0.68") {
            luckIndex = 6;
          }
          if (data.awardValue == "6.6") {
            luckIndex = 2;
          }
          if (data.awardValue == "88") {
            luckIndex = 4;
          }
        }
        // 实物商品
        if (data.awardType == "2") {
          // 漫花抽纸3包
          if (data.awardId == 16) {
            luckIndex = 3;
          }
          // 虾选擦手巾
          if (data.awardId == 17) {
            luckIndex = 5;
          }
        }
        // 花币
        if (data.awardType == "3") {
          luckIndex = 8;
        }
      }
    } catch (error) {
      console.log(error);
    }

    // 获取要移动的次数，及初始化数据
    this.setState(
      {
        moveCount: cycleNum * 9 + 1 + cycleIndexList.indexOf(luckIndex),
        isStart: true,
        luckIndex,
      },
      () => {
        this.actionMove();
      }
    );
  };

  render() {
    const { imgList, luckIndex } = this.state;
    return (
      <div className="newcomerLotteryModule">
        <Modal className="lotteryModal" maskClosable={false} transparent visible={this.state.isLotteryModaShow} animationType="fade" closable={false}>
          <div className="content">
            {imgList.map((imgItem, index) => {
              return (
                <div key={imgItem.value} className={imgItem.status === 1 ? "contentItem action" : "contentItem"}>
                  <img src={imgItem.value} alt="" />
                </div>
              );
            })}
          </div>
          <div className="lotteryButton" onClick={this.startRun}>
            <img src={`https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryButton.png`} alt="" />
          </div>
        </Modal>
        <Modal
          className="lotteryModal resultModal"
          maskClosable={false}
          transparent
          visible={this.state.isResultModalShow}
          animationType="fade"
          closable={false}
        >
          <div className="content">
            <div className="resultDiscription">恭喜你成功获得以下奖品</div>
            <div className="resultGift">
              <img src={`https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/lotteryPicBig${luckIndex + 1}.png`} alt="" />
            </div>
          </div>
          <div className="getGiftButton" onClick={this.handleClose}>
            <img src={`https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220322/getGiftButton.png`} alt="" />
          </div>
        </Modal>
      </div>
    );
  }
}
